<!DOCTYPE html>
<html>
<meta charset="utf-8"> 
<head>
	<title>demo</title>
<link rel="stylesheet" type="text/css" href="css/common.css">
<style type="text/css">
.u-container{
	position: relative;
	width: 100%;
	height: 140px;
	margin: 0 auto;
	margin-top: 40px;
	overflow-x: hidden;
	overflow-y: auto;
}
.u-container .machine:hover{
	background: #29abe2;
}
.u-container p{
	display: none;
}
.machine{
	float: left;
	height: 130px;
	text-align: center;
}
.machine img{
	height: 100%;
}
.undone{
	-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
    filter: grayscale(100%);
    background: #d0d0d0;
}
.u-datacon{
	position: relative;
	width: 100%;
	height: 840px;
}
.u-leftline{
	position: relative;
	width: 50%;
	height: 540px;
	float: left;
}
.u-chartcon{
	position: relative;
	float: left;
	width: 900px;
	height: 900px;
	margin-top: 40px;
	margin-left: 100px;
	text-align: center;
	overflow: hidden;
}
.u-chart{
	position: relative;
	float: left;
	width: 100%;
	height: 300px;
	margin: 172px 0 0 26px;
	border-left: 1px solid #aaa;
	border-bottom: 1px solid #aaa;
}
.u-chartleft{
	position: absolute;
	display: block;
	height: 100%;
	width: 20px;
	left: -22px;
	top: 0;
}
.u-changetime{
	width: 100%;
	height: 30px;
}
.u-changetime input[type='date']{
	text-indent: 7px;
	height: 27px;
	width: 170px;
	-webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
	border: 1px solid #d0d0d0;
	margin-left: 4px;
}
.u-start{
	float: left;
	margin-left: 90px;
}
.u-start label,.u-end label{
	display: inline-block;
	text-align: left;
	width: 100px;
}
.u-end{
	float: left;
	margin-left: 10px;
}
.u-auto{
	line-height: 27px;
}
.u-chartbottom{
	position: absolute;
	display: block;
	width: 40px;
	height: 20px;
	line-height: 20px;
	margin: 0;
	left: -30px;
	bottom: -22px;
}
.u-chartbars{
	float: left;
	position: relative;
	height: 100%;
	width: 20px;
	margin-left: 20px;
	-webkit-transform: rotateX(180deg);
}
.u-chartbars .u-mname{
	position: absolute;
	left: -15px;
	top: -16px;
	line-height: 16px;
	width: 50px;
	font-size: 12px;
	-webkit-transform: rotateX(-180deg);
}
.u-product{
	float: left;
	height: 46px;
	width: 100%;
	bottom: 0;
	left: 0;
	background: #f5d73e;
}
.u-break{
	float: left;
	width: 100%;
	height: 20px;
	background: #f44336;
}
.u-error{
	float: left;
	width: 100%;
	height: 20px;
	background: #009fff;
}
.u-chartbars:nth-child(1) .u-product{
	height: 70%;
}
.u-chartbars:nth-child(2) .u-product{
	height: 20%;
}
.u-chartbars:nth-child(3) .u-product{
	height: 50%;
}
.u-chartbars:nth-child(4) .u-product{
	height: 90%;
}
.u-chartbars:nth-child(5) .u-product{
	height: 40%;
}
.u-xm{
	width: 100%;
	margin-top: 20px;
	text-align: left;
}
.u-xm label{
	width: 100px;
	display: inline-block;
}
.u-xm select{
	width: 170px;
	height: 30px;
	-webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
	border: 1px solid #d0d0d0;
}
.u-temperature{
	width: 630px;
	height: 300px;
	margin: 0 auto;
	background-size: 100% auto;
}
.u-zoom{
	float: left;
	width: 74px;
	height: 44px;
	margin:0 8px;
	text-align: center;
}
.u-zoom:nth-child(1){
	background: #fcd5b4;
}
.u-zoom:nth-child(2){
	background: #fcd5b4;
}
.u-zoom:nth-child(3){
	background: #fead54;
}
.u-zoom:nth-child(4){
	background: #fead54;
}
.u-zoom:nth-child(5){
	background: #fead54;
}
.u-zoom:nth-child(6){
	background: #fcd5b4;
}
.u-zoom:nth-child(7){
	background: #fdeada;
}
.u-zoom h1{
	margin: 0;
	margin-top: 5px;
	font-size: 14px;
	font-weight: normal;
}
.u-zoom p{
	padding: 0;
	margin: 0;
	font-size: 12px;
}
</style>
<link rel="stylesheet" type="text/css" href="css/machine.css">
</head>
<body>
<div class='u-head'>
   <div class="u-headcon">
	<a href="index.html"><div class="u-mainpage">回到首页</div></a>
	<h3>干燥炉分析</h3>
</div>
</div>

<div class="u-datacon">
	<div class="u-chartcon">
		<div class="u-xm">
			<label style="margin-left: 90px;">产线</label>
			<select>
				<option value ="1">1</option>
			</select>
			<label style="margin-left: 10px;">设备</label>
			<select class="type">
				<option value ="1">干燥炉</option>
			</select>
			<a class="u-downloadCSV" id="downloadCSV" style="margin-left: 10px;"><div class="u-btnblue">导出CSV</div></a>
			<div class="u-btnblue u-confirmbtn">确认</div>
		</div>
		<div id='canvasDiv'></div>
		<div class="u-temperature">
			<div class="u-zoom"><h1 data-localize="statistics_drying.tzone_pre">预热区</h1><p class="t0">100&#8451;</p></div>
			<div class="u-zoom"><h1 data-localize="statistics_drying.tzone_1">一温区</h1><p class="t1">180&#8451;</p></div>
			<div class="u-zoom"><h1 data-localize="statistics_drying.tzone_2">二温区</h1><p class="t2">200&#8451;</p></div>
			<div class="u-zoom"><h1 data-localize="statistics_drying.tzone_3">三温区</h1><p class="t3">200&#8451;</p></div>
			<div class="u-zoom"><h1 data-localize="statistics_drying.tzone_4">四温区</h1><p class="t4">200&#8451;</p></div>
			<div class="u-zoom"><h1 data-localize="statistics_drying.tzone_5">五温区</h1><p class="t5">180&#8451;</p></div>
			<div class="u-zoom"><h1 data-localize="statistics_drying.tzone_6">六温区</h1><p class="t6">180&#8451;</p></div>
		</div>
	</div>
</div>

<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="js/ichart.1.2.1.min.js"></script>
<script type="text/javascript" src="js/jquery.localize.min.js" charset="utf-8"></script>
<script type="text/javascript" src="js/language_cookie.js" charset="utf-8"></script>

<script type="text/javascript">
$(function() {
	var labela = [];
	var data = [{
			name: langMsg.statistics_drying.time,
			value: [0],
			color: '#29abe2',
			line_width: 2,
		}];
	var chart = new iChart.LineBasic2D({
		render: 'canvasDiv',
		animation:true,
		animation_duration:'500',
		data: data,
		align: 'center',
		width: 900,
		height: 460,
		shadow: false,
		legend:{
			enable:true,
			background_color : null,
			border : {
				enable : false
			}
		},
		background_color: '#ffffff',
		sub_option: {
			smooth: false,
			label: false,
			hollow: false,
			hollow_inside: false,
			point_size: 6
		},
		coordinate: {
			width: 640,
			height: 260,
			striped_factor: 0.18,
			gridlinesVisible:false,
			grid_color: '#4e4e4e',
			axis: {
				color: '#252525',
				width: [0, 0, 2, 2]
			},
			scale: [{
				position: 'left',
				start_scale: 0,
				end_scale: 10,
				scale_space: 10,
				scale_size: 2,
				scale_enable: false,
				label: {
					color: '#333333',
					font: '微软雅黑',
					fontsize: 11,
					fontweight: 600
				},
				scale_color: '#9f9f9f'
			}, {
				position: 'bottom',
				start_scale: 0,
				end_scale: 10,
				label: {
					color: '#333333',
					font: '微软雅黑',
					fontsize: 11,
					fontweight: 600
				},
				scale_enable: false,
				labels: labela
			}]
		}
	});
	//利用自定义组件构造左侧说明文本
	chart.plugin(new iChart.Custom({
		drawFn: function() {
			//计算位置
			var coo = chart.getCoordinate(),
				x = coo.get('originx'),
				y = coo.get('originy'),
				w = coo.width,
				h = coo.height;
			//在左上侧的位置，渲染一个单位的文字
			chart.target.textAlign('start')
				.textBaseline('bottom')
				.textFont('600 11px 微软雅黑')
				.fillText('温度', x - 40, y - 12, false, '#333333')
				.textBaseline('top')
				.fillText('时间', x + w + 70, y + h + 10, false, '#333333')
				.textBaseline('top');
		}
	}));
	//开始画图
	chart.draw();
	var dataa = {
        header: [langMsg.statistics_drying.lineId,langMsg.statistics_drying.equipmentId,langMsg.statistics_drying.equipmentName,langMsg.statistics_drying.weight,langMsg.statistics_drying.time],
        body: [
            ['1', '1', '111', '111','2017-08-09']
        ]
    };
    $('.u-downloadCSV').click(function(){
    	var obj = document.getElementById('downloadCSV');
    	csvDownload(obj,dataa);
    });
	$('.u-confirmbtn').click(function(){
		var aaa = [0];
		var url = 'http://web.kuai-info.com:8008/OmronService/CurveController/days1Curve',
			line,index;
		line = 1;
		index = 1;
		type = $('.type').val();
		var mes = getData(line,index,url);
		console.log(mes);
		for (var i = 0,len = mes.resultObject.list.length; i < len; i++) {
			aaa[i] = mes.resultObject.list[i].yValue;
			labela[i] = mes.resultObject.list[i].xValue;
		}
		data = [{
			name: '时间',
			value: aaa,
			color: '#29abe2',
			line_width: 2,
		}];
		chart.load(data);
	})
});
function getData(line,index,url){
    var res = null;
    $.ajax({  
        type:'get',      
        url: url,
        async : false, 
        dataType: "json",
        data:{"line":line,"index":index},  
        success:function(data){
            if (data.resultCode == 200 && data.resultMessage == "OK") {
                res = data;
            }
        },
        error:function(){
            console.log("fail");
        }  
    });
    return res;
}
</script>

</body>
</html>